<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax</title>
</head>

<body>
    <div id="container">
        <ul id="ul-list">
            <li></li>
        </ul>
    </div>
    <script>
        // 1.创建ajax实例对象
        let xhr = new XMLHttpRequest()
        // 2.请求方式，传入地址，true等等......
        xhr.open('get', 'https://cnodejs.org/api/v1/topics', true)
        // 3.发送ajax
        xhr.send(null)
        // 4.请求判断和返回实例化对象
        xhr.onreadystatechange = function () {
            // 判断状态码
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    let data = JSON.parse(xhr.responseText)
                    let result = data.data.map((item) => {
                        return item.title
                    })
                    let li = document.createElement('li')
                    li.innerHTML = (
                        `<div>${result}</div> `
                    )
                    let ulList = document.querySelector('#ul-list')
                    ulList.appendChild(li)
                }
            }
        }
    </script>
</body>

</html>